<!-- Copyright (c) Microsoft Corporation.
     Licensed under the MIT License. -->

<html>
  <head>
    <meta charset="utf-8" />
    <title>Build asynchronous custom functions in Excel with web workers</title>
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
    <script src="../functions/functions.js" type="text/javascript"></script>
    <script type="text/javascript">
      let ballX = 100;
      let ballY = 10;
      let ballDirection = "downRight";

      Office.onReady(function () {
        animate();
        console.log("Office.onReady");
      });

      function animate() {
        setInterval(drawBall, 10);
      }

      const drawBall = () => {
        const canvas = document.getElementById("mycanvas");

        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");
          ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
          moveBall(ctx.canvas.width, ctx.canvas.height);
          const radius = 20;

          ctx.beginPath();
          ctx.arc(ballX, ballY, radius, 0, 2 * Math.PI, false);
          ctx.fillStyle = "green";
          ctx.fill();
          ctx.lineWidth = 4;
          ctx.strokeStyle = "#003300";
          ctx.stroke();
        }
      };

      const moveBall = (width, height) => {
        // Check for ball collision with context boundaries.
        if (ballX <= 0) {
          if (ballDirection === "upLeft") {
            ballDirection = "upRight";
          } else {
            ballDirection = "downRight";
          }
        }
        if (ballY <= 0) {
          if (ballDirection === "upLeft") {
            ballDirection = "downLeft";
          } else {
            ballDirection = "downRight";
          }
        }
        if (ballX >= width) {
          if (ballDirection === "upRight") {
            ballDirection = "upLeft";
          } else {
            ballDirection = "downLeft";
          }
        }
        if (ballY >= height) {
          if (ballDirection === "downRight") {
            ballDirection = "upRight";
          } else {
            ballDirection = "upLeft";
          }
        }
        switch (ballDirection) {
          case "upRight": {
            ballX++;
            ballY--;
            break;
          }
          case "upLeft": {
            ballX--;
            ballY--;
            break;
          }
          case "downRight": {
            ballX++;
            ballY++;
            break;
          }
          case "downLeft": {
            ballX--;
            ballY++;
            break;
          }
        }
      };
    </script>
  </head>

  <body>
    <script src="./taskpane.js" type="text/javascript"></script>
    <div class="container">
      <h1 style="margin: 8px">Build asynchronous custom functions in Excel with web workers</h1>
      <p>See how web workers in custom Excel functions prevent your Office Add-in UI from being blocked.</p>
      <p></p>
      <p>When you select this button, a function will start that blocks the bouncing ball.</p>
      <button type="button" id="runCFWithoutWebWorker">Run function without a web worker</button>
      <p>When you select this button, a function will start that doesn't block the bouncing ball.</p>
      <button type="button" id="runCFWithWebWorker">Run function with web workers</button>
      <p></p>
      <canvas id="mycanvas" width="200" height="200"></canvas>
    </div>
  </body>
</html>
